jQuery — Previous Elements and Attributes

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.prev()

We call the .prev() method to get the immediately preceding sibling of each element in the set of matched elements.

If a selector is provided, it gets the precious siblings only if it matches that selector.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get the li that’s immediately before the li with the class third-item by writing:

$("li.third-item").prev().css("background-color", "red");

Then we add a red background to it.

.prevAll()

The .prevAll() method gets all preceding siblings of each element in the set of matched elements.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get all the preceding siblings of the li that has the class third-item and add a background to them by writing:

$("li.third-item").prevAll().css("background-color", "red");

.prevUntil()

The .prevUntil() gets all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

For example, if we have:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

Then we get all the dd before the dt with ID term-2 and up to but not including the first dt by writing:

$("#term-2").prevUntil("dt")
  .css("background-color", "red");

and we set their background to red.

.promise()

The .promise() method returns a promise to observe when all actions of a certain type bound to the collection have finished.

For instance, if we have:

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

Then we can show some text when we click on a button by writing:

$("button").on("click", function() {
  $("p").append("Started...");

  $("div").each(function(i) {
    $(this).fadeIn().fadeOut(1000 * (i + 1));
  });

  $("div").promise().done(function() {
    $("p").append(" Finished! ");
  });
});

We loop through each div and apply some fade effects with fadeIn and fadeOut .

Then we call promise and run code when all the method calls are done with the promise().done() method.

.prop()

We can use the prop method to get the attribute value.

For example, if we have:

<input id="check1" type="checkbox" checked="checked">

Then we can write:

$("input").change(function() {
  const $input = $(this);
  console.log($input.prop("checked"));
}).change();

to watch for the changes to the checkbox input.

We get the checked attribute’s value with the prop method.

.pushStack()

We call the pushStack method to add a collection of DOM elements onto the jQuery stack.

For example, if we have:

<div>
  foo
</div>

Then we call pushStack to add the div to the stack and remove it by writing:

jQuery([])
  .pushStack(document.getElementsByTagName("div"))
  .remove()
  .end();

Conclusion

We can get previous elements and get property values with jQuery.